<template>
  <div class="page">
    <div class="pdh">
      <div class="weui-flex pdv bd-b-light">
        <div class="weui-flex__item">
          <span v-if="group.name">{{group.name}}</span>
          <open-data v-else type="groupName" :open-gid="group.openGroupId"></open-data>
        </div>
        <div>
          <a class="ui btn-link" @tap="isShowManagePanel = !isShowManagePanel">
            <span v-if="!isShowManagePanel" class="fs-s c-gray">管理</span>
            <span v-else class="fs-s c-gray">收起</span>
          </a>
        </div>
      </div>
    </div>
    <div v-if="isShowManagePanel" class="bg-white pd">
      <div class="weui-flex ta-c">
        <div class="weui-flex__item bd-r">
          <notify-btn cls="ui btn link ta-c" @hit="onModify">修改班名</notify-btn>
        </div>
        <div class="weui-flex__item bd-c bd-r">
          <div v-if="members.length > 0"><notify-btn cls="ui btn link" @hit="onDeleteMember">删除学生</notify-btn></div>
          <div v-else><notify-btn cls="ui btn link c-gray">删除学生</notify-btn></div>
        </div>
        <div class="weui-flex__item">
          <notify-btn cls="ui btn link ta-c" @hit="onDisband">解散本班</notify-btn>
        </div>
      </div>
      <div class="line"></div>
    </div>

    <div class="pd mgb">
      <div class="fs-4 pdb-s c-gray">班主任</div>
      <div class="weui-flex v-mdl">
        <div style="width: 40px;"><avatar :src="loginer.avatarUrl"></avatar></div>
        <div class="weui-flex__item pdl">{{loginer.nickName}}</div>
      </div>
    </div>

    <div class="pdh fs-4 c-gray">
      学生 {{members.length}}人
    </div>
    <div class="weui-cells" v-for="n in members" :key="index" @tap="onCheck(n.id)" style="padding:16rpx 32rpx;">
      <div class="weui-cell" style="padding:0">
          <div class="weui-cell__hd" v-if="opt == 'manger'">
            <input type="checkbox" :checked="n.checked">
          </div>
          <div v-if="n.avatarUrl">
            <div style="width: 40px;"><avatar :src="n.avatarUrl"></avatar></div>
          </div>
          <div class="weui-cell__bd pdl">
            {{n.name}}
            <span v-if="n.roleName != '本人'">({{n.roleName}})</span>
          </div>
      </div>
      <!-- <div class="line"></div> -->
    </div>

    <div class="pd-xxl c-gray ta-c" v-if="members.length == 0">
      暂时没有学生哦
    </div>

    <div class="fix-bottom bg-white">
      <button class="ui btn primary no-rounder" open-type="share">发送班级邀请</button>
    </div>
    <cfm v-model="isShowDisbandConfirm">
      <div class="ta-c pd-l">
        <div>确定要解散吗?</div>
        <div>解散后不可恢复</div>
      </div>
    </cfm>

    <side-menu v-if="isShowSideMenu"></side-menu>
    <page-common></page-common>
  </div>
</template>

<script>
import Avatar from '@/components/avatar'
import PageCommon from '@/components/page-common'
import NotifyBtn from '@/components/notify-btn'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'
import * as $group from '@/api/group'
import SideMenu from '@/components/side-menu'
import Cfm from '@/components/cfm'

export default {
  mixins: [base],
  data () {
    return {
      selectedIds: [],
      opt: '',
      isCheckAll: false,
      isShowManagePanel: false,
      isShowDisbandConfirm: ''
    }
  },
  components: {
    PageCommon,
    Avatar,
    SideMenu,
    NotifyBtn,
    Cfm
  },
  onShareAppMessage() {
    return {
      title: this.group.name + '邀请你加入！',
      path: '/pages/group-invite/main?groupId=' + this.group.id
    }
  },
  computed: {
    ...mapGetters([
      'group',
      'loginer'
    ]),
    members () {
      let kvRoleName = {
        'user': '本人',
        'father': '爸爸',
        'mather': '妈妈'
      }
      let t = []
      this.group.members.forEach(n => {
        let roleName = kvRoleName[n.role]
        t.push({
          name: n.name || n.nickName,
          id: n.userId,
          avatarUrl: n.avatarUrl,
          role: n.role,
          roleName,
          checked: this.selectedIds.indexOf(n.userId) >= 0
        })
      })
      return t
    }
  },
  async onPullDownRefresh() {
    let {groupId} = this.getParams()
    this.getGroupById({groupId, cache: false})
    wx.stopPullDownRefresh()
  },
  methods: {
    onPageShow () {
      this.isShowManagePanel = false
    },
    loginBack () {
      let {groupId} = this.getParams()
      this.getGroupById({groupId, cache: false})
    },
    ...mapActions([
      'getGroupById',
    ]),
    ...mapActions('group', [
      'removeMembersByIds',
    ]),
    onCheck (id) {
      if (this.opt !== 'manger') return
      if (this.selectedIds.indexOf(id) >= 0) {
        let t = []
        this.selectedIds.forEach(n => {
          if (n === id) return
          t.push(n)
        })
        this.selectedIds = t
        return
      }
      this.selectedIds.push(id)
    },
    async onDel () {
      await $group.removeMembersByIds(this.group.id, this.selectedIds)
      this.getGroupById({groupId: this.group.id, cache: true})
      this.selectedIds = []
    },
    onDisband () {
      this.isShowDisbandConfirm = 'show'
    },
    onModify () {
      wx.navigateTo({
        url: '/pages/user-group-modify/main'
      })
    },
    onDeleteMember () {
      wx.navigateTo({
        url: '/pages/user-group-delete-member/main'
      })
    }
  },
  watch: {
    async isShowDisbandConfirm (nv) {
      if (nv !== 'ok') return
      await $group.disband(this.group.id)
      wx.navigateBack()
    },
    isCheckAll (nv) {
      if (!nv) {
        this.selectedIds = []
        return
      }
      let t = []
      this.group.users.forEach(n => {
        t.push(n.id)
      })
      this.selectedIds = t
    }
  }
}
</script>

<style scoped lang="less">
.group-basic {
  position: relative;
  .opt {
    position: absolute;
    top: 10px;
    font-size: 13px;
    a {
      text-decoration: underline;
      cursor: pointer;
    }
    &-jiesan {
      left: 10px;
    }
    &-change {
      right: 10px;
    }
  }
}
.line{
  margin-top: 32rpx;
}
.weui-cell:before{
  border-top:none;
}
.weui-cells:before{
  border-top: none;
}
</style>
